<template>
  <div>
      <topnav title="我的团队"></topnav>
        <div class="list">
            <li>    
               <p>一级：5人</p>
               <span @click="look(1)">查看详情</span>
            </li>
            <li>    
               <p>二级：5人</p> 
               <span @click="look(2)">查看详情</span>
            </li>
            <li>    
               <p>三级：5人</p> 
               <span @click="look(3)">查看详情</span>
            </li>
        </div>

    
      <div class="footer">
          <router-link to="recommend">
          <button>邀请好友</button>
          </router-link>
          <router-link to="jointeam">
          <button>填写推荐码</button>
          </router-link>
      </div>
  </div>
</template>

<script>
import topnav from "../../components/topNav"
export default {
    data(){
        return{

        }
    },
    methods:{
        look(type){
            this.$router.push("team"+"?id="+ type)
        }
    },
    components:{
        topnav
    }
}
</script>

<style lang="less" scoped>
.space{
    height: 8px;
    background-color: #f6f6f6;
}
.header{
    height: 100px;
    display: flex;
    align-items: center;       
    img{
        width: 80px;
        height: 80px;
        background-size: 100%;
        margin: 0 auto;
    }
}
.list {
    li:nth-child(2) {
        background: url("../../assets/user/team_2.png")no-repeat;
        background-size: 100%; 
    }
    li:nth-child(3) {
        background: url("../../assets/user/team_3.png")no-repeat;
        background-size: 100%; 
    }
    li{
        width: 90%;
        height: 70px;
        display: flex;
        margin: 20px auto;
        justify-content: space-between;
        align-items: center;
        background: url("../../assets/user/team_1.png") no-repeat;
        background-size: 100%; 
        border-radius: 6px;
        
        p{
            color: #fff;
            font-weight: 600;
            margin-left: 20px;
        }
        span{
            display: block;
            width: 70px;
            height: 25px;
            background-color: #fff;
            color: #fc751c;
            text-align: center;
            border-radius: 50px;
            font-size: 12px;
            line-height: 25px;
            margin-right: 20px;

        }
    }
}
.footer {
   text-align: center;
    margin-top: 100px;
    button{
        width: 90%;
        height: 50px;
        border: none;
        border-radius: 40px;
        margin-top: 10px;
        color: #fff;
        background-color: #ff6608;
    }
}
</style>